<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		 *{
		 	margin: 0px;
		 	padding: 0px;
		 }
		 .box, .box2{
		 	width: 200px;
		 	height: 200px;
		 	background: pink;
		 }
			/*	绝对定位：position: absolute;
			        -脱标：原来的位置不保留
			        -参考点：
			            1.如果祖辈元素没有定位流，参考点即为浏览器
			            2.如果有定位流，且只有一个，那么这个子代元素的绝对定位参考点，就是这个有定位流的祖辈元素
			            3.如果有多个定位流，那么这个子代元素的参考点，就会以离他最近的那个（有定位流）祖辈元素为参考点
			       注意:绝对定位和float相似，脱标，不区分行内、块状元素	 */
		 .box{
		 	position: absolute;
		 	right: 0px;
		 	bottom: 0px;
		 }
		 .box2{
		 	background: skyblue;
		 }
		 span{
		 	width: 200px;
		 	height: 200px;
		 	background: red;
		 	position: absolute;
		 	right: 10px;
		 }
		 .grandpa{
		 	width: 600px;
		 	height: 600px;
		 	background: orange;
		 	position: absolute;
		 	bottom: 0px;
		 }
		 .father{
		 	width: 400px;
		 	height: 400px;
		 	background: blue;
		 	position: absolute;
		 }
		 .son{
		 	width: 200px;
		 	height: 200px;
		 	background: grey;
		 	position: absolute;
		 	right: 0px;
		 	bottom: 0px;
		 }
	</style>
</head>
<body>
	 <div class="box"></div>
	 <div class="box2"></div>
	 <div class="grandpa">
	 	<div class="father">
	 		<div class="son"></div>
	 	</div>
	 </div>
	 <span>axxxhh</span>
</body>
</html>